<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#tutorial3 {
			border: 1px solid black;
		}

		#tutorial2 {
			border: 1px solid black;
			margin: 400px 500px;
		}

		#tutorial {
			border: 1px solid black;
			margin: 650px 500px;
		}
		img{width: 300px;display: none;}
	</style>
	<body>
		<img id="kj" src="img/222.png" >
		<img id="imgL" src="./img/111.png" alt="">
		<canvas id="tutorial3" width="1300" height="1000"></canvas>
		<canvas id="tutorial2" width="300" height="300"></canvas>
		<canvas id="tutorial" width="300" height="300"></canvas>
		<script type="text/javascript">
			let drow2 = function() {
				let canvas = document.getElementById("tutorial3");
				let ctx = canvas.getContext("2d");
				let imgL = document.getElementById("imgL");
				let kj = document.getElementById("kj");
				imgL.onload = function(){
					ctx.drawImage(kj,80,100,330,282);
					ctx.drawImage(imgL,100,80,300,252);
				}
				
				ctx.fillRect(450,10,150,150);
				ctx.save();
				ctx.fillStyle = "#09f";
				ctx.fillRect(465,25,120,120)
				ctx.save();
				ctx.fillStyle = "#fff";
				ctx.globalAlpha = 0.5;
				ctx.fillRect(480,40,90,90);
				ctx.restore();
				ctx.fillRect(495,55,60,60);
				ctx.save();
				ctx.translate(1000,200);
				let lineGrad3 = ctx.createLinearGradient(0,0,30,30);
				for (var i = 0; i < 100; i++) {
					lineGrad3.addColorStop(i*0.01,`rgb(${51*i},${255-51*1},255)`);
				}
				ctx.fillRect(0,0,200,200)
				ctx.fillStyle = lineGrad3;
				for (var i = 1; i < 6; i++) {
					ctx.save();
					for (var j = 0; j < i*6; j++) {
						ctx.rotate(Math.PI*2/(i*6));
						ctx.beginPath();
						ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
						ctx.fill();
					}
					ctx.restore();
				}
				ctx.restore();
				
				ctx.save();
				ctx.scale(-1,1);
				ctx.font='48px serif';
				ctx.fillText("lgz",100,450);
				ctx.restore();
				
				
				let lineGrad = ctx.createLinearGradient(0, 0, 0, 150);
				lineGrad.addColorStop(0, '#00ABEB');
				lineGrad.addColorStop(0.5, "#26C000");
				lineGrad.addColorStop(1, "#fff");
				ctx.fillStyle = lineGrad;
				//设置坐标是因为只有在这个坐标范围内才会有渐变色。超过了就固定为最起初的颜色或者最结尾的颜色。
				let lineGrad2 = ctx.createLinearGradient(110,150,810,810);
				lineGrad2.addColorStop(0,'red');
				lineGrad2.addColorStop(0.5,'blue')
				lineGrad2.addColorStop(1,"yellow")
				ctx.strokeStyle = lineGrad2;
				// draw shapes
				/* ctx.fillRect(10, 10, 130, 130);
				ctx.strokeRect(50,50,40,40); */
				let rool = ctx.createRadialGradient(60,60,10,60,60,20);
				rool.addColorStop(0,"#fff");
				rool.addColorStop(0.4,"orange");
				rool.addColorStop(0.95,"red");
				ctx.fillStyle=rool;
				ctx.fillRect(0,0,40,40);
				ctx.beginPath();
				ctx.arc(60,60,20,0,Math.PI*1.4,false);
				//ctx.fillStyle="blue"
				ctx.fill();
				ctx.shadowBlur = 2;
				ctx.shadowColor = "aqua";
				ctx.shadowOffsetX =2;
				ctx.shadowOffsetY = 2 ;
				ctx.font="48px serif"
				ctx.fillText("lgz",10,100);
			};
			drow2();
			let drow = function() {
				let canvas = document.getElementById("tutorial2");
				let ctx = canvas.getContext("2d");
				roundedRect(ctx, 12, 12, 164, 164, 15);
				roundedRect(ctx, 19, 19, 150, 150, 9);
				roundedRect(ctx, 53, 53, 49, 33, 10);
				roundedRect(ctx, 53, 119, 49, 16, 6);
				roundedRect(ctx, 135, 53, 49, 33, 10);
				roundedRect(ctx, 135, 119, 25, 49, 10);
				ctx.beginPath();
				ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
				ctx.lineTo(31, 37)
				ctx.fill();
				for (var i = 0; i < 8; i++) {
					ctx.beginPath();
					ctx.arc(51 + i * 16, 35, 2, 0, Math.PI * 2, true);
					ctx.fill();
				}
				for (i = 0; i < 6; i++) {
					ctx.fillRect(115, 51 + i * 16, 4, 4);
				}
				for (i = 0; i < 8; i++) {
					ctx.fillRect(51 + i * 16, 99, 4, 4);
				}
				ctx.beginPath();
				ctx.moveTo(83, 116);
				ctx.lineTo(83, 102);
				ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
				ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
				ctx.lineTo(111, 116);
				ctx.lineTo(106.333, 111.333);
				ctx.lineTo(101.666, 116);
				ctx.lineTo(97, 111.333);
				ctx.lineTo(92.333, 116);
				ctx.lineTo(87.666, 111.333);
				ctx.lineTo(83, 116);
				ctx.fill();
				ctx.fillStyle = "white";
				ctx.beginPath();
				ctx.moveTo(91, 96);
				ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
				ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
				ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
				ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
				ctx.moveTo(103, 96);
				ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
				ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
				ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
				ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
				ctx.fill();
				ctx.fillStyle = "black";
				ctx.beginPath();
				ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
				ctx.fill();
				ctx.beginPath();
				ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
				ctx.fill();
			};
			drow();

			function roundedRect(ctx, x, y, width, height, radius) {
				ctx.beginPath();
				ctx.moveTo(x, y + radius);
				ctx.lineTo(x, y + height - radius);
				ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
				ctx.lineTo(x + width - radius, y + height);
				ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
				ctx.lineTo(x + width, y + radius);
				ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
				ctx.lineTo(x + radius, y);
				ctx.quadraticCurveTo(x, y, x, y + radius);
				ctx.stroke();
			}


			function draw() {
				let canvas = document.getElementById("tutorial");
				let ctx = canvas.getContext("2d");
				ctx.fillStyle = 'rgb(200,0,0)';
				ctx.fillRect(10, 10, 55, 50);
				ctx.fillStyle = "rgba(0,0,200,0.5)";
				ctx.fillRect(30, 30, 55, 50);
				ctx.clearRect(30, 30, 25, 20);
				ctx.strokeStyle = "red";
				ctx.strokeRect(80, 80, 20, 20);
				ctx.beginPath();
				ctx.moveTo(100, 10);
				ctx.lineTo(200, 20);
				ctx.lineTo(150, 60);
				ctx.closePath();
				ctx.fill();
				ctx.beginPath();
				ctx.strokeStyle = "firebrick"
				ctx.arc(150, 150, 50, 0, Math.PI * 2, true);
				ctx.moveTo(189, 150)
				ctx.arc(150, 150, 38, 0, Math.PI, false);
				ctx.moveTo(135, 140)
				ctx.arc(130, 140, 5, 0, Math.PI * 2, true);
				ctx.moveTo(175, 140)
				ctx.arc(170, 140, 5, 0, Math.PI * 2, true);
				ctx.stroke();
			}
			draw();
		</script>
	</body>
</html>
